<template>
    <div>
        <div id="changeHeader">
            <slot></slot>
        </div>
    </div>    
</template>
<script>
export default {
    data(){
        return{

        }
    },
    mounted(){

        // handleScroll为页面滚动的监听回调
        window.addEventListener('scroll', this.handleScroll);
    },
     destroyed(){
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods:{
        handleScroll(){
            // 得到页面滚动的距离
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let header = document.getElementById("changeHeader");
            //console.log(scrollTop);
            header.style.backgroundColor="rgb(83,205,245," + (0 + scrollTop)/255 + ")";
        },
    }
}
</script>
<style>

</style>
